<!DOCTYPE html>
<html>
	<head>
		<title>Henry At Your Service</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
		<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
		<link rel="stylesheet" href="css/nouislider.fox.css" />
		<script async src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<script async src="js/jquery.js"></script>
		<script async src="js/jquery.nouislider.min.js"></script>
		<script async src="js/bootstrap-tooltip.js"></script>
		<script async src="js/bootstrap-popover.js"></script>
		<script async src="js/bootstrap.min.js"></script>
		<script async src="js/henry.js"></script>
		<script>
			window.onload = function(){
				$(".results").hide(); // Hides the gallery upon execution
				
			};
			
			var answersArray = new Array();
			var tout;
			var ajaxObject = false;
			
			// this is our object which gives us access
			// to Ajax functionality

			function doAjaxQuery(url, responseAction) {
				ajaxObject = false;
				if (window.XMLHttpRequest) {// if we're on Gecko (Firefox etc.), KHTML/WebKit (Safari/Konqueror) and IE7
					ajaxObject = new XMLHttpRequest();
					// create our new Ajax object
					if (ajaxObject.overrideMimeType) {// older Mozilla-based browsers need some extra help
						ajaxObject.overrideMimeType('text/xml');
					}
				} else if (window.ActiveXObject) {// and now for IE6
					try {// IE6 has two methods of calling the object, typical!
						ajaxObject = new ActiveXObject("Msxml2.XMLHTTP");
						// create the ActiveX control
					} catch (e) {// catch the error if creation fails
						try {// try something else
							ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
							// create the ActiveX control (using older XML library)
						} catch (e) {
						} // catch the error if creation fails
					}
				}
				if (!ajaxObject) {// if the object doesn't work
					// for some reason it hasn't worked, so show an error
					alert('Sorry, your browser seems to not support this functionality.');
					return false;
					// exit out of this function
				}
				ajaxObject.onreadystatechange = (responseAction == "body")?ajaxResponseBody:ajaxResponseNewWindow;
				// when the ready state changes, run this function
				// DO NOT ADD THE () AT THE END, NO PARAMETERS ALLOWED!
				ajaxObject.open('GET', url, true);
				// open the query to the server
				ajaxObject.send(null);
				// close the query
				
				// and now we wait until the readystate changes, at which point
				// ajaxResponse(); is executed
				
				return true;
			}// end function doAjaxQuery
			
			function ajaxResponseBody() {// this function will handle the processing
				// N.B. - in making your own functions like this, please note
				// that you cannot have ANY PARAMETERS for this type of function!!
				if (ajaxObject.readyState == 4) {// if ready state is 4 (the page is finished loading)
					if (ajaxObject.status == 200) {// if the status code is 200 (everything's OK)
						// here is where we will do the processing
						var s=document.createElement('script'); // create script element
						s.src= ajaxObject.responseText;
						document.body.appendChild(s); // Send the response url to the callback function: "_cb_findItemsAdvancedResponse"
					}// end if
					else {// if the status code is anything else (bad news)
						alert('There was an error. HTTP error code ' + ajaxObject.status.toString() + '.');
						return;
						// exit
					}
				} // end if
				// if the ready state isn't 4, we don't do anything, just
				// wait until it is...
			} // end function ajaxResponse
			
			function ajaxResponseNewWindow() {// this function will handle the processing
				// N.B. - in making your own functions like this, please note
				// that you cannot have ANY PARAMETERS for this type of function!!
				if (ajaxObject.readyState == 4) {// if ready state is 4 (the page is finished loading)
					if (ajaxObject.status == 200) {// if the status code is 200 (everything's OK)
						// here is where we will do the processing
						//window.open(ajaxObject.responseText);
						//var s=document.createElement('script'); // create script element
						//alert(ajaxObject.responseText);
						var w= window.open('about:blank');
						w.document.write(ajaxObject.responseText);
						w.focus();
					}// end if
					else {// if the status code is anything else (bad news)
						alert('There was an error. HTTP error code ' + ajaxObject.status.toString() + '.');
						return;
						// exit
					}
				} // end if
				// if the ready state isn't 4, we don't do anything, just
				// wait until it is...
			} // end function ajaxResponse
		</script>
		
		<style>
			.results {
				margin: auto;
				width: 1000px;
				height: 1000px;
			}
			
			#star1, #star2, #star3, #star4, #star5 { 
				position: absolute;
				bottom: 0;
				left: 0;
			}
		</style>
	</head>
	
	<body bgcolor="#EAE5E5">
		<script>
			var start = 0;
			var items;
		
			function _cb_findItemsAdvancedResponse(root) { // The callback function
				items = root.findItemsAdvancedResponse[0].searchResult[0].item || []; // Items returned from JSON request
				//globalItems = root.findItemsAdvancedResponse[0].searchResult[0].item || []; // Items returned from JSON request
				var margins = [[0,50,0,0],[0,50,0,0],[0,0,0,0],[50,50,0,160],[50,0,0,0]]; // Margins of laptops 1-5
				
				$("#content").hide(); // Removes all the content that is on the screen
				$(".results").show(); // Shows the results
	
				for (var i = 0; i < 5; ++i) {
					var laptop = "#laptop" + (i +1); // Laptop element
					var laptopMargin = margins[i][0] + "px " + margins[i][1] + "px " + margins[i][2] + "px " + margins[i][3] + "px"; // Laptop margin
					$(laptop).css({"margin":laptopMargin,"position":"relative","float":"left","width":"240px","height":"300px","padding":"0.4em"});
					getNextDetails(i);
				} 
				
				$("#s2").hide();
				$("#s3").hide();
				$("#s4").hide();
				$("#s5").hide();
				$("#s1> a").html("Restart Demo");
			    $("#s1> a").attr("href", "");
			} // End of callback function
			
			function collapse_extend(type, Id) {
				var imageId = "img#" + type + Id + "img";
				var imageSrc = $(imageId).attr("src");
				
				switch(imageSrc){
					case "img/cart.bmp":
						$(imageId).attr("src","img/cart_extended.bmp");
						$(imageId).attr("width","150");
						$(imageId).attr("height","50");
						break;
					case "img/cart_extended.bmp":
						$(imageId).attr("src","img/cart.bmp");
						$(imageId).attr("width","25");
						$(imageId).attr("height","25");
						break;
					case "img/star_like_a_glove.png":
						$(imageId).attr("src","img/star_like_a_glove_extended.png");
						$(imageId).attr("width","100");
						$(imageId).attr("height","50");
						break;
					case "img/star_like_a_glove_extended.png":
						$(imageId).attr("src","img/star_like_a_glove.png");
						$(imageId).attr("width","25");
						$(imageId).attr("height","25");
						break;
					case "img/star_this_can_fit.png":
						$(imageId).attr("src","img/star_this_can_fit_extended.png");
						$(imageId).attr("width","100");
						$(imageId).attr("height","50");
						break;
					case "img/star_this_can_fit_extended.png":
						$(imageId).attr("src","img/star_this_can_fit.png");
						$(imageId).attr("width","25");
						$(imageId).attr("height","25");
						break;
					case "img/star_not_suitable_for_you.png":
						$(imageId).attr("src","img/star_not_suitable_for_you_extended.png");
						$(imageId).attr("width","100");
						$(imageId).attr("height","50");
						break;
					case "img/star_not_suitable_for_you_extended.png":
						$(imageId).attr("src","img/star_not_suitable_for_you.png");
						$(imageId).attr("width","25");
						$(imageId).attr("height","25");
						break;
				}
			}
			
			function viewChoices(){
				var urlForGet = "getChoices.php?arr[]="+answersArray[0];
				for (var i=1;i<answersArray.length;i++){
					urlForGet += "&arr[]="+answersArray[i];
				}
				doAjaxQuery(urlForGet, "newWindow");
			}
			
			function getNextDetails(Id){
				var laptopH = "#laptop" + (Id +1) + "> h3";  // Laptop picture
				var laptopP = "#laptop" + (Id +1) + "> p"; // Laptop description
				var laptopBuy = "#buy" + (Id +1); // Laptop "Buy" button
				var laptopBuyA = "#buy" + (Id +1) + "> a"; // Laptop "Buy" button
				var laptopClose = "#close" + (Id + 1); // Laptop "Close" button
				var laptopStar = "#star" + (Id + 1);
				
				if(start < items.length){
					var item     = items[start];
					var title    = item.title;
					var pic      = item.galleryURL;
					var viewitem = item.viewItemURL;
					
					// Assign HTML + CSS to the results
					$(laptopH).html("<a href='" + viewitem + "'><img src='" + pic + "' width=150 height=50></img></a>");
					$(laptopH).css({"padding":"1.0em","text-align":"center"});
					
					$(laptopP).html(title);
					
					if(start <5)
						$(laptopBuy).html("<a href='" + viewitem + "'>" + $(laptopBuy).html() + "</a>");
					else $(laptopBuyA).attr("href", viewitem);
					
					$(laptopBuy).css({"position":"absolute", "bottom":"0", "right":"0"});
					$(laptopClose).css({"position":"absolute","top":"20px","right":"10px"});
					$(laptopClose).hide();
					start++;
				}
				else{
					$(laptopH).html("No Results");
					$(laptopP).html("No Results");
					$(laptopBuyA).removeAttr("href");
					$(laptopBuy).hide();
					$(laptopStar).removeAttr("onclick");
					$(laptopStar).hide();
				}
			}
			
			function showValue(divName, rangeName){
				var divId = "#" + divName;
				var rangeId = "#" + rangeName;
				$(divId).html($(rangeId).val());
			}
		</script>
		<div id="wrapper">
			<div id="header">
				<div class="navbar">
					<div class="navbar-inner">
						<a class="brand" href="http://www.henryatyourservice.com"><img src="img/Henry logo.png" alt="Henry At Your Service"/> </a>
					</div>
				</div>
				<div class="progress progress-striped active">
					<div id="s1" class="bar bar-info" style="width: 20%;">
						<a class="stage" href="#" onclick="hide_to_stage(s1);">Purpose of use</a>
					</div>
					<div id="s2" class="bar bar-error" style="width: 20%;">
						<a class="stage" href="#" onclick="hide_to_stage(s2);">Measures</a>
					</div>
					<div id="s3" class="bar bar-info" style="width: 20%;">
						<a class="stage" href="#" onclick="hide_to_stage(s3);">Battery</a>
					</div>
					<div id="s4" class="bar" style="width: 20%;">
						<a class="stage" href="#" onclick="hide_to_stage(s4);">Design</a>
					</div>
					<div id="s5" class="bar bar-info" style="width: 20%;">
						<a class="stage" href="#" onclick="hide_to_stage(s5);">Money</a>
					</div>
				</div>
			</div> <!-- end of header -->
			<div id="content">
				<p class="speech">
					Hello! I'm Henry.<br/> Let's find the right laptop for you together.
					<br/>This only takes a few seconds.
					
					<button class="btn-large" name="continue" type="button" onclick="stage1();">continue</button>
				</p>
				
				<!--HENRY OVER HERE-->
				<img class="henry" src="./img/henry.png"/>
			
				<!-- ------------- -->
				<script>
				function finish(){
					var urlForGet = "findItemsAdvanced.php?arr[]="+answersArray[0];
					for (var i=1;i<answersArray.length;i++){
						urlForGet += "&arr[]="+answersArray[i];
					}
					document.getElementsByClassName('speech')[0].innerHTML= "Looking for the right Laptops for you...";
					doAjaxQuery(urlForGet, "body");
				}
				</script>
			</div><!-- end of content -->
			
			<div class="results"> <!-- Results template -->
					<div id="laptop1" class="ui-widget-content ui-corner-all" onmouseover="$(close1).show()" onmouseout="$(close1).hide()">
						<div id="close1" onclick="getNextDetails(0)"><img src="img/close.bmp" width=25 height=25"></div>
						<h3 class="ui-widget-header ui-corner-all">No Results</h3>
						<p>No Results</p>
						<div id="buy1"><img id="buy1img" src="img/cart.bmp" width=25 height=25 onmouseover="collapse_extend('buy',1)" onmouseout="collapse_extend('buy',1)"></div>
						<div id="star1" onclick="viewChoices()"><img id="star1img" src="img/star_like_a_glove.png" width=25 height=25 onmouseover="collapse_extend('star',1)" onmouseout="collapse_extend('star',1)"></div>
					</div>
					<div id="laptop2" class="ui-widget-content ui-corner-all" onmouseover="$(close2).show()" onmouseout="$(close2).hide()">
						<div id="close2" onclick="getNextDetails(1)"><img src="img/close.bmp" width=25 height=25></div>
						<h3 class="ui-widget-header ui-corner-all">No Results</h3>
						<p>No Results</p>
						<div id="buy2"><img id="buy2img" src="img/cart.bmp" width=25 height=25 onmouseover="collapse_extend('buy',2)" onmouseout="collapse_extend('buy',2)"></div>
						<div id="star2" onclick="viewChoices()"><img id="star2img" src="img/star_like_a_glove.png" width=25 height=25 onmouseover="collapse_extend('star',2)" onmouseout="collapse_extend('star',2)"></div>
					</div>
					<div id="laptop3" class="ui-widget-content ui-corner-all" onmouseover="$(close3).show()" onmouseout="$(close3).hide()">
						<div id="close3" onclick="getNextDetails(2)"><img src="img/close.bmp" width=25 height=25></div>
						<h3 class="ui-widget-header ui-corner-all">No Results</h3>
						<p>No Results</p>
						<div id="buy3"><img id="buy3img" src="img/cart.bmp" width=25 height=25 onmouseover="collapse_extend('buy',3)" onmouseout="collapse_extend('buy',3)"></div>
						<div id="star3" onclick="viewChoices()"><img id="star3img" src="img/star_like_a_glove.png" width=25 height=25 onmouseover="collapse_extend('star',3)" onmouseout="collapse_extend('star',3)"></div>
					</div>
					<div id="laptop4" class="ui-widget-content ui-corner-all" onmouseover="$(close4).show()" onmouseout="$(close4).hide()">
						<div id="close4" onclick="getNextDetails(3)"><img src="img/close.bmp" width=25 height=25></div>
						<h3 class="ui-widget-header ui-corner-all">No Results</h3>
						<p>No Results</p>
						<div id="buy4"><img id="buy4img" src="img/cart.bmp" width=25 height=25 onmouseover="collapse_extend('buy',4)" onmouseout="collapse_extend('buy',4)"></div>
						<div id="star4" onclick="viewChoices()"><img id="star4img" src="img/star_this_can_fit.png" width=25 height=25 onmouseover="collapse_extend('star',4)" onmouseout="collapse_extend('star',4)"></div>
					</div>	
					<div id="laptop5" onclick="getNextDetails(4)" class="ui-widget-content ui-corner-all" onmouseover="$(close5).show()" onmouseout="$(close5).hide()">
						<div id="close5"><img src="img/close.bmp" width=25 height=25></div>
						<h3 class="ui-widget-header ui-corner-all">No Results</h3>
						<p>No Results</p>
						<div id="buy5"><img id="buy5img" src="img/cart.bmp" width=25 height=25 onmouseover="collapse_extend('buy',5)" onmouseout="collapse_extend('buy',5)"></div>
						<div id="star5" onclick="viewChoices()"><img id="star5img" src="img/star_this_can_fit.png" width=25 height=25 width=25 height=25 onmouseover="collapse_extend('star',5)" onmouseout="collapse_extend('star',5)"></div>
					</div>
				</div><!-- End of results template -->
				
			<div id="footer">
				Icons from <a href="http://thenounproject.com/" target="_blank">The Noun Project</a>
				<p>&copy; Copyright by HenryAtYourService 2013</p>
			</div> <!-- end of footer -->
		</div> <!-- end of wrapper --> 
		
		
		<style type="text/css">
			#s1, #s2, #s3, #s4, #s5 {
				visibility: hidden;
				
			}
			a.stage {
				color: #000066;
				text-decoration:none;
			}
			.stage {
				color: #000066;
			}
			html, body {
				margin: 0;
				padding: 0;
				height: 100%;
			}
			#wrapper {
				min-height: 100%;
				position: relative;
			}
			/*#header {
			 padding: 10px;
			 /*background: #5ee;*/
			/*}*/
			#content {
				background: #EAE5E5;
				padding: 10px;
				padding-bottom: 80px; /* Height of the footer element */
			}
			#footer {
				width: 100%;
				/*height: 80px;*/
				position: absolute;
				bottom: 0;
				left: 0;
				/*background: #ee5;*/
			}
			.henry {
				position: absolute;
				height: 300px;
				width: 300px;
				bottom: 150px;
			}
			p.speech {
				margin: auto;
				width: 800px;
				height: 350px;
				position: relative;
				min-height: inherit;
				text-align: center;
				line-height: 100px;
				background-color: #fff;
				border: 8px solid #666;
				-webkit-border-radius: 30px;
				-moz-border-radius: 30px;
				border-radius: 30px;
				-webkit-box-shadow: 2px 2px 4px #888;
				-moz-box-shadow: 2px 2px 4px #888;
				box-shadow: 2px 2px 4px #888;
				font: "Comic Sans MS";
				font-size: xx-large;
			}
			p.speech:before {
				content: ' ';
				position: absolute;
				width: 0;
				height: 0;
				left: -50px;
				bottom: 180px;
				border: 25px solid;
				border-color:   #666  #666 transparent transparent;<--   transparent #666 transparent   ; -->
				
			}
			p.speech:after {
				content: ' '
					;
					position: absolute;
					width: 0;
					height: 0;
					left: -30px;
					
					border: 15px solid;
					border-color:  #fff #fff   transparent      transparent  ;
					bottom: 190px;
			}
			div[class="tooltip-inner"
				] {
				max-width: 1000px;
				text-align: center;
				-webkit-border-radius: 0px;
				-moz-border-radius: 0px;
				border-radius: 0px;
				margin-bottom: 6px;
				background-color: #505050;
				font-size: 30px;
				}

			table {
				border-collapse: seperate;
    			border-spacing: 2px;
				empty-cells:show;
				padding: 100px;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</body>
</html>